<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/layui-v2.6.6/layui/css/layui.css">
</head>
<body>
<div class="layui-container layui-bg-red">
    常规布局（以中型屏幕桌面为例）：
    <div class="layui-row">
        <div class="layui-col-md9">
            你的内容 9/12
        </div>
        <div class="layui-col-md3">
            你的内容 3/12
        </div>
    </div>

    移动设备、平板、桌面端的不同表现：
    <div class="layui-row">
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
            移动：6/12 | 平板：6/12 | 桌面：4/12
        </div>
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
            移动：6/12 | 平板：6/12 | 桌面：4/12
        </div>
        <div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
            移动：4/12 | 平板：12/12 | 桌面：4/12
        </div>
        <div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
            移动：4/12 | 平板：7/12 | 桌面：8/12
        </div>
        <div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
            移动：4/12 | 平板：5/12 | 桌面：4/12
        </div>
    </div>

    <div class="layui-row layui-col-space10">
        <div class="layui-col-md4">
            1/3
        </div>
        <div class="layui-col-md4">
            1/3
        </div>
        <div class="layui-col-md4">
            1/3
        </div>
    </div>

    <div class="layui-row layui-col-space5">
        <div class="layui-col-md5">
            <div class="layui-row grid-demo">
                <div class="layui-col-md3">
                    内部列
                </div>
                <div class="layui-col-md9">
                    内部列
                </div>
                <div class="layui-col-md12">
                    内部列
                </div>
            </div>
        </div>
        <div class="layui-col-md7">
            <div class="layui-row grid-demo grid-demo-bg1">
                <div class="layui-col-md12">
                    内部列
                </div>
                <div class="layui-col-md9">
                    内部列
                </div>
                <div class="layui-col-md3">
                    内部列
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-md4">
            4/12
        </div>
        <div class="layui-col-md4 layui-col-md-offset4">
            偏移4列，从而在最右
        </div>
    </div>
</div>
<!--layui的圖標-->
<div class="layui-container">
    <br>
    <br>
    <br>
    <i class="layui-icon layui-icon-heart-fill" style="font-size: 30px; color: #FF5722;"></i>
    <i class="layui-icon layui-icon-heart-fill" style="font-size: 30px; color: #FF5722;"></i>
    <i class="layui-icon layui-icon-heart-fill" style="font-size: 30px; color: #FF5722;"></i>
    <br>
    <i class="layui-icon layui-icon-heart" style="font-size: 30px; color: #FF5722;"></i>
    <i class="layui-icon layui-icon-heart" style="font-size: 30px; color: #FF5722;"></i>
    <i class="layui-icon layui-icon-heart" style="font-size: 30px; color: #FF5722;"></i>
    <br>
    <i class="layui-icon layui-icon-add-circle" style="font-size: 30px; color: #FF5722;"></i>
    <i class="layui-icon layui-icon-reduce-circle" style="font-size: 30px; color: #1E9FFF;"></i>
    <br>
    <i class="layui-icon layui-icon-login-wechat" style="font-size: 30px; color: #5FB878;"></i>
    <i class="layui-icon layui-icon-login-qq" style="font-size: 30px; color: #1E9FFF;"></i>
    <i class="layui-icon layui-icon-login-weibo" style="font-size: 30px; color: #FFB800;"></i>
<!--layui的動畫效果-->
    <div class="layui-anim layui-anim-up layui-anim-scalesmall-spring">
        143567额我让共同研究
    </div>

    <button type="button" class="layui-btn" onclick="my()">一个标准的按钮</button>
    <a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>
    <br>
    <form class="layui-form" action="">
        <select name="city" lay-verify="">
            <option value="010">北京</option>
            <option value="021" disabled>上海（禁用效果）</option>
            <option value="0571" selected>杭州</option>
        </select>
        默认风格：
        <input type="checkbox" name="" title="写作" checked>
        <input type="checkbox" name="" title="发呆">
        <input type="checkbox" name="" title="禁用" disabled>

        原始风格：
        <input type="checkbox" name="" title="写作" lay-skin="primary" checked>
        <input type="checkbox" name="" title="发呆" lay-skin="primary">
        <input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>

    </form>
    <br>
    <ul class="layui-nav" lay-filter="">
        <li class="layui-nav-item"><a href="">最新活动</a></li>
        <li class="layui-nav-item layui-this"><a href="">产品</a></li>
        <li class="layui-nav-item"><a href="">大数据</a></li>
        <li class="layui-nav-item">
            <a href="javascript:;">解决方案</a>
            <dl class="layui-nav-child"> <!-- 二级菜单 -->
                <dd><a href="">移动模块</a></dd>
                <dd><a href="">后台模版</a></dd>
                <dd><a href="">电商平台</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item"><a href="">社区</a></li>
    </ul>
    <div id="test1"></div>
</div>


<script src="./css/layui-v2.6.6/layui/layui.js"></script>
<script>
    layui.use('laypage', function(){
        var laypage = layui.laypage;

        //执行一个laypage实例
        laypage.render({
            elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
            ,count: 50 //数据总数，从服务端得到
        });
    });

    function my() {
        alert("hello world");
    }
</script>

<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
        var element = layui.element;

        //…
    });
</script>

<script type="text/javascript">
    var d=new Date();
    // document.write("从 1970/01/01 至今已过去 " + d.getTime("2021.06.17") + " 毫秒");

    // d.setFullYear(1992,10,3)
    // document.write(d)

    // document.write (d.toUTCString())

    //


    document.write()

</script>

</body>
</html>
